<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>云手机HOST</title>
    <style>
        .enter-page {
            margin: 0 auto;
            background-color: #fff;
            border: 1px solid gray;
        }

        .pc-size {
            width: 500px;
            overflow: hidden;
        }

        .mobile-size {
            width: 100%;
            padding-bottom: 50px;
            overflow: hidden;
        }

        .form-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px;
        }

        .input-item {
            margin-top: 20px;
            width: 100%;
            height: 35px;
            text-align: center;
            line-height: 35px;
        }

        .input-item-display {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .input-name {
            display: inline-block;
            width: 100px;
            text-align: right;
        }

        .input-value {
            line-height: 30px;
            padding-left: 10px;
            width: 50%;
            border-radius: 5px;
            background: #fff;
            border: 1px solid #595959;
        }

        .input-value:focus {
            border: 1px solid blue;
            outline: none;
        }

        .enter-btn {
            cursor: pointer;
            width: 50%;
            height: 35px;
            background: #fff;
            border: 1px solid #595959;
            border-radius: 50px;
        }

        .phone-container {
            display: none;
        }

        .error-msg {
            display: none;
            height: 25px;
            width: 50%;
            font-size: 12px;
            color: red;
            text-align: left;
        }
    </style>
</head>
<body>
<div id="enterPage" class="enter-page">
    <form action="" autocomplete="on" class="form-content">
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机ip" type="text" id="ipInput" name="ipInput" class="input-value">
            <div class="error-msg" id="ipError">请输入正确的ip</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机port" type="text" id="portInput" name="portInput" class="input-value">
            <div class="error-msg" id="portError">请输入正确的port</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入AppId" type="text" id="appIdInput" name="appIdInput" class="input-value">
            <div class="error-msg" id="appIdError">请输入正确的AppId</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机appKey" type="text" id="appKeyInput" name="appKeyInput" class="input-value">
            <div class="error-msg" id="appKeyError">请输入正确的AppKey</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机Env" type="text" id="envInput" name="envInput" class="input-value">
            <div class="error-msg" id="envError">请输入正确的Env</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机roomId" type="text" id="roomIdInput" name="roomIdInput" class="input-value">
            <div class="error-msg" id="roomIdError">请输入正确的roomId</div>
        </div>
        <div class="input-item input-item-display">
            <input placeholder="请输入云手机channelType" type="text" id="channelTypeInput" name="channelTypeInput"
                   class="input-value">
            <div class="error-msg" id="channelTypeError">请输入正确的channelType</div>
        </div>
        <div class="input-item input-item-display">
            <a id="trustHost" target="_blank" href="">信任目标机器</a>
        </div>
        <div class="input-item">
            <button type="button" id="enterBtn" class="enter-btn" onclick="enterIndexPage()">进入</button>
        </div>
    </form>
</div>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script type="text/javascript">
    var vConsole = new window.VConsole();
    let ipExp = /([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])(\.([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])){3}$/;
    let ipErrorEle = document.getElementById('ipError');
    let portErrorEle = document.getElementById('portError');
    let appIdErrorEle = document.getElementById('appIdError');
    let appKeyErrorEle = document.getElementById('appKeyError');
    let envErrorEle = document.getElementById('envError');
    let roomIdErrorEle = document.getElementById('roomIdError');
    let channelTypeErrorEle = document.getElementById('channelTypeError');
    let trustAele = document.getElementById('trustHost');

    trustAele.addEventListener('click', () => {
        event.preventDefault();

        const ipVal = document.getElementById('ipInput').value;
        const portVal = document.getElementById('portInput').value;
        const validateHostRet = validateHost({
            ipVal: ipVal,
            portVal: portVal
        });
        if (!validateHostRet) {
            return;
        }

        window.open('https://' + [ipVal, portVal].join(':'));
    });

    function enterIndexPage() {
        const ipVal = document.getElementById('ipInput').value;
        const portVal = document.getElementById('portInput').value;
        const appIdVal = document.getElementById('appIdInput').value;
        const appKeyVal = document.getElementById('appKeyInput').value;
        const envVal = document.getElementById('envInput').value;
        const roomIdVal = document.getElementById('roomIdInput').value;
        const channelTypeVal = document.getElementById('channelTypeInput').value;

        let validateRet = validateChannelType(channelTypeVal);
        if (!validateRet) {
            return;
        }

        if (channelTypeVal === 'WebRtc') {
            validateRet = validateRtc({
                appIdVal: appIdVal,
                appKeyVal: appKeyVal,
                envVal: envVal,
                roomIdVal: roomIdVal
            });
        } else if (channelTypeVal === 'WebSocket') {
            validateRet = validateHost({
                ipVal: ipVal,
                portVal: portVal
            });
        } else {
            validateRet = false;
        }

        if (!validateRet) {
            return;
        }

        const hostStr = ipVal + ':' + portVal;
        sessionStorage.setItem('cloudPhoneHost', hostStr);
        sessionStorage.setItem('appId', appIdVal);
        sessionStorage.setItem('appKey', appKeyVal);
        sessionStorage.setItem('env', envVal);
        sessionStorage.setItem('roomId', roomIdVal);
        sessionStorage.setItem('channelType', channelTypeVal);

        let localHref = window.location.href + 'index';
        if (window.location.href.indexOf('enter.html') > -1) {
          localHref = window.location.href.replace('enter.html',  'demo.html');
          if (localHref === window.location.href) {
            localHref = window.location.href.replace('enter.html', 'demo.html');
          }
        }

        window.location.href = localHref;
    }

    function validateHost(hostVal) {
        const ipVal = hostVal.ipVal;
        const portVal = hostVal.portVal;

        let isPortError = false;
        let isIpError = false;

        if (!ipExp.test(ipVal)) {
            isIpError = true;
            ipErrorEle.style.display = 'block';
        }

        if (!(/^[1-9]\d*$/.test(portVal) && 1 <= 1 * portVal && 1 * portVal <= 65535)) {
            isPortError = true;
            portErrorEle.style.display = 'block';
        }

        return !(isIpError || isPortError);
    }

    function validateRtc(rtcVal) {
        const appIdVal = rtcVal.appIdVal;
        const appKeyVal = rtcVal.appKeyVal;
        const envVal = rtcVal.envVal;
        const roomIdVal = rtcVal.roomIdVal;

        let isAppIdError = false;
        let isAppKeyError = false;
        let isEnvError = false;
        let isRoomIdError = false;

        if (appIdVal === '') {
            isAppIdError = true;
            appIdErrorEle.style.display = 'block';
        }

        if (appKeyVal === '') {
            isAppKeyError = true;
            appKeyErrorEle.style.display = 'block';
        }

        if (envVal !== 'root' && envVal !== 'gammagreen' && envVal !== 'gammablue') {
            isEnvError = true;
            envErrorEle.style.display = 'block';
        }

        if (roomIdVal === '') {
            isRoomIdError = true;
            roomIdErrorEle.style.display = 'block';
        }

        return !(isAppIdError || isAppKeyError || isEnvError || isRoomIdError);
    }

    function validateChannelType(channelTypeVal) {
        let isChannelTypeError = false;
        if (channelTypeVal !== 'WebRtc' && channelTypeVal !== 'WebSocket') {
            isChannelTypeError = true;
            channelTypeErrorEle.style.display = 'block';
        }
        return !isChannelTypeError;
    }

    window.onload = function () {
        let enterBtn = document.getElementById('enterBtn');
        let ipInputEle = document.getElementById('ipInput');
        let portInputEle = document.getElementById('portInput');
        let pageContent = document.getElementById('enterPage');

        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
            pageContent.classList.add('mobile-size');
        } else {
            pageContent.classList.add('pc-size');
        }

        ipInputEle.addEventListener('blur', function () {
            const ipValue = ipInputEle.value;
            if (!ipExp.test(ipValue)) {
                ipErrorEle.style.display = 'block';
            } else {
                ipErrorEle.style.display = 'none';
            }
        });

        portInputEle.addEventListener('blur', function () {
            const portVal = portInputEle.value;
            if (!(/^[1-9]\d*$/.test(portVal) && 1 <= 1 * portVal && 1 * portVal <= 65535)) {
                portErrorEle.style.display = 'block';
            } else {
                portErrorEle.style.display = 'none';
            }
        });
    }
</script>
</body>
</html>